<template>
  <div id="app">
    <remote-js src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js" @load="loadIp" />
    <nav-bar left-arrow @clickLeft="$goPageBack('profile')"/>
    <div class="pd-all">
      <p class="c-gray-l font-md pd-all-xs">公司信息</p>
      <van-cell-group>
        <van-field
          readonly
          clickable
          label="公司类型"
          :value="companyTypeText"
          @click="showCompanyArr = true"
        >
          <template slot="right-icon">
            <span v-show="!companyTypeText" class="type-place">选择类型</span>
            <van-icon name="arrow"/>
          </template>
        </van-field>
        <van-field
          v-model="companyName"
          clearable
          label="公司名称"
          placeholder="请填写公司名称"
        />

        <van-field
          required
          readonly
          v-model="companyCity"
          label="所在地"
          right-icon="arrow"
          placeholder="请选择省市区"
          @click="showCity = true"
        />

        <van-field
          clearable
          v-model="companyAddr"
          label="地址"
          placeholder="请填写公司地址"
        />
      </van-cell-group>

      <p class="c-gray-l font-md pd-all-xs">登录信息</p>
      <van-cell-group :border="border">
          <van-field 
            required
            clearable 
            label="真实姓名"
            v-model="realName" 
            maxlength="11" 
            placeholder="请填写真实姓名" 
          />
          <van-field 
            required
            clearable 
            label="手机号"
            v-model="phone" 
            maxlength="11" 
            type="tel" 
            placeholder="用于账号登录/消息接收" 
          />
          <van-field
            required
            clearable
            label="验证码"
            v-model="captcha"
            center
            maxlength="6" 
            type="tel" 
            placeholder="请输入短信验证码"
          >
            <sms-wrap slot="button" :phone="phone" ref="smsSend" />
          </van-field>
          <van-field 
            required
            clearable 
            label="登录密码"
            v-model="password" 
            type="password" 
            placeholder="请输入6-16位登录密码" 
          />
          <van-field 
            required
            clearable 
            label="确认密码"
            v-model="repassword" 
            type="password" 
            placeholder="请再次输入登录密码" 
          />
        </van-cell-group>

        <van-button type="primary" class="mg-top-xxl" block :disabled="!verify.flag" @click="registe">马上注册</van-button>
        <van-row type="flex" justify="space-between">
          <van-col span="12"></van-col>
          <van-col span="12" class="c-gray mg-top text-right" @click="$goPage('login')">已有账号，马上登录</van-col>
        </van-row>
    </div>
    
    <slogan class="mg-top-xxl"/>

    <!-- 弹出 -->
    <van-popup v-model="showCompanyArr" position="bottom">
      <van-picker
        show-toolbar
        title="公司类型"
        :visible-item-count='3'
        :columns="companyArr"
        @cancel="cancel"
        @confirm="confirmType"
      />
    </van-popup>

    <van-popup v-model="showCity" position="bottom">
      <van-area 
        :area-list="areaList"
        :value="String(companyZoneId)"
        @cancel="cancel"
        @confirm="confirmCity"
      />
    </van-popup>

  </div>
</template>

<script>
  import { 
    Area,
    Field, 
    CellGroup, 
    Button, 
    Row, 
    Col, 
    Icon, 
    Toast, 
    Picker, 
    Popup 
  } from 'vant';
  import { COMPANY_ARR } from '@data/dic/constant';
  import { sms, signUp } from '@/api/modules/user';
  import { mobileReg } from '@utils//regexp';
  import AreaList from '@data/area';
  import SendSms from '@cmpt_com/sms';
  import NavBar from "@cmpt/header/navbar"
  import Slogan from '@cmpt/slogan'
  import importJs from '@cmpt_com/importJs'
  export default {
    name: 'registe',
    components:{
      [Slogan.name]: Slogan,
      [Area.name]: Area,
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Picker.name]: Picker,
      [Popup.name]: Popup,
      [SendSms.name]: SendSms,
      [NavBar.name]: NavBar,
      [importJs.name]: importJs
    },
    data(){
        return {
          companyTypeText: '',
          companyType: '',
          companyName: '',
          companyCity: '',
          companyZoneId: 110101,
          companyAddr: '',
          realName: '',
          phone: '',
          captcha: '',
          password: '',
          repassword: '',
          showCity: false,
          showCompanyArr: false,
          companyArr: COMPANY_ARR,
          isLogining: false,
          border: false,
          areaList: AreaList,
        }
    },
    computed: {
       verify: function () {
          if(!this.companyZoneId){
              return {flag: true, msg: '请选择公司所在地'};
          }
          if(!this.realName){
              return {flag: true, msg: '请填写真实姓名'};
          }else {
            const name = this.realName.replace(/[^\x00-\xff]/g,"01")
            if(name.length > 20){
              Toast('姓名太长，不超过20个字符')
              return
            }
          }
          if(!this.phone){
              return {flag: true, msg: '请填写手机号码'};
          }else if(!mobileReg.test(this.phone)){
              return {flag: true, msg: '手机号码格式不正确'};
          }
          if(!this.captcha){
              return {flag: true, msg: '请填写验证码'};
          }
          if(this.password.length < 6 || this.password.length > 16){
              return {flag: true, msg: '密码长度在6-16个字符之间'};
          }
          if(this.password != this.repassword){
              return {flag: true, msg: '两次输入的密码不一致'};
          }
          return {flag: true, msg: 'ok'};
      }
    },
    created(){
      // 设置微信、app分享
      // TODO: xxx邀请您加入优采
      this.$set_share({
        title: `优采平台注册`,
      })
    },
    methods: {
      async registe() {
        if(this.verify.msg != 'ok'){
          Toast(this.verify.msg)
        }else{
          let http_header = {}
          if(this.$getUrlParam('cid')){
            http_header['X-CID'] = this.$getUrlParam('cid')
          }

          signUp({
            zone_id: this.companyZoneId, // 所在地
            real_name: this.realName, // 真实姓名
            phone: this.phone, // 手机号
            captcha: this.captcha, // 验证码
            once_str: this.$refs.smsSend.once_str, // 验证码校验字符串
            password: this.password, // 登录密码 长度8-32
            re_password: this.repassword, // 确认密码 长度8-32
            company_kind: this.companyType, // 公司类型
            shop_name: this.companyName, // 公司名称
            address: this.companyCity + this.companyAddr, // 公司地址
          }, http_header).then(res => {
            if(!res && res.code != 200)return
            this.$goPage('registe/success', {
              state: res.data.audit_status || 0,
              phone: this.phone
            })
          }).catch(err => {
            this.$refs.smsSend.resend = true
          })
        }
      },
      cancel () {
        this.showCity = this.showCompanyArr = false;
      },
      confirmType(value) {
        this.companyType = value.key;
        this.companyTypeText = value.text
        this.showCompanyArr = false;
      },
      confirmCity(value) {
        this.province = value[0].captcha;
        this.city = value[0].captcha;
        this.county = value[0].captcha;
        this.companyCity = value[0].name + ' ' + value[1].name + ' ' + value[2].name;
        this.companyZoneId = Number(value[2].code);
        this.showCity = false;
      },
      loadIp(){
        var geolocation = new qq.maps.Geolocation("YEEBZ-CEZWU-ARDVD-4IFUH-FFFKF-SMFPN", "myapp");
        var options = {timeout: 8000, async: false};
        geolocation.getLocation(this.showPosition, showErr, options);
        function showErr() {}
        
      },
      showPosition (position) {
        //console.log('position', position)
        this.companyZoneId = Number(position.adcode);
        const county = AreaList.county_list[Number(position.adcode)]
        this.companyCity || (this.companyCity = position.province + ' ' + position.city + ' ' + county)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@style_m/basic/utils/index.less';
  #app {
    .van-cell-group {
      border-radius: 5px;
      overflow: hidden;
    }
    .van-cell:not(:last-child)::after {
      right: 10px;
      left: 10px;
    }

    .type-place {
      color: @color-main;
      font-size: @font-size-default;
      display: inline-block;
      vertical-align: middle;
      & + .van-icon {
        display: inline-block;
        vertical-align: middle;
      }
    }
    .van-cell--required::before {
      left: 7px;
      top: 27%;
    }
  }

</style>
